<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>积分明细</title>
    <link rel="shortcut icon" href="favicon.ico"> 
    <link href="<%=path%>/hplus/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="<%=path%>/hplus/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/footable/footable.core.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/plugins/dataTables/css/jquery.dataTables.min.css"/>
    <link href="<%=path%>/hplus/css/animate.min.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="<%=path%>/hplus/js/plugins/sweetalert/sweetalert2.min.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link href="<%=path%>/hplus/css/plugins/datapicker/datepicker3.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/hplus/css/plugins/zTree/zTreeStyle/metro.css" rel="stylesheet">
    <style> 
        .col-sm-1{
            font-weight: normal;
        } 
        
        .caoZuo{font-size: 15px;margin: 0 4px;color:#676a6c}
        table.dataTable tbody th, table.dataTable tbody td{
        padding:0;
        }
        
        table.dataTable tbody th, table.dataTable tbody td{
        padding:10px;
        }  
    </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="col-md-12 ibox-content">
            <div class="col-md-4" style="margin-top:15px">
                <div class="input-daterange input-group" id="datepicker">
                    <input type="text" class="input-sm form-control" style="background: white;" name="start" value="" id="start_time" readonly="readonly">
                    <span class="input-group-addon" style="height: 24px;">到</span>
                    <input type="text" class="input-sm form-control" style="background: white;" name="end"  value="" id="end_time" readonly="readonly">				
                </div>
            </div>
            
            <form class="col-md-12 form-horizontal" style="margin-top:10px">
              <div class="col-sm-3 text-left" style="margin-left:-30px;margin-top:10px">
                  <label class="col-sm-3 control-label" style="text-align: left;">姓名</label>
                  <div class="col-sm-8" style="margin-left:-30px">
                      <input id="nickName" type="text" class="form-control" placeholder="请输入员工姓名"  maxlength="10" onblur="checkLength(this)">
                  </div>
              </div> 
              <div class="col-sm-3" style="margin-left:-70px;margin-top:10px">
                  <label class="col-sm-3 control-label" style="width: 30%;">手机号</label>
                  <div class="col-sm-9" style="margin-left:-15px">
                      <input id="staffPhone" type="text" class="form-control" placeholder="请输入员工手机号" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'0')}else{this.value=this.value.replace(/\D/g,'')}" maxlength="11">
                  </div>
              </div> 
              <div class="col-sm-3" style="margin-left:-70px;margin-top:10px">
                  <label class="col-sm-5 control-label">所属部门</label>
                  <div class="col-sm-4" style="margin-left:-15px">
                      <button class="btn btn-primary" type="button" data-toggle="modal" href="#" data-target="#modalDepartment">选择部门</button>
                  </div>
              </div> 
              <div class="col-sm-3 text-right pull-right" style="padding-right: 0;">
	              <button onclick="javascript:search();" class="btn btn-primary" type="button" style="margin-top:10px">搜索</button>
	              <shiro:hasPermission name="integral_details:export_csv">
	                 <button onclick="javascript:exportCsvData();" class="btn btn-primary btn-outline" type="button" style="margin-top:10px">导出csv</button>
                  </shiro:hasPermission>
              
              </div>
            </form> 
            
             <div class="col-sm-12" style="margin-top:10px;">
                <div class="ibox float-e-margins">
                    <div class="table-responsive">
                        <table class="display  table-striped table-bordered table-hover" role="grid" id="mydataTable">
                            <thead>
                                <tr style="font-size:14px">
                                   <th>序号</th>
                                   <th>部门</th>
                                   <th>姓名</th>
                                    <th>手机号码</th>
                                   <th>积分描述</th>
                                   <th>积分时间</th>
                                   <th>积分数</th>
                                </tr>
                            </thead>
                            <tbody style="font-size:14px">
                            </tbody>
                        </table>
                    </div>                 
                </div>
            </div>
        </div>      
    </div>
    <div hidden="" class="modal inmodal fade" id="modalDepartment" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content"  style="width:400px;">
                <div class="modal-header" style="padding: 15px 15px 10px;">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="text-left">用户部门配置</h4>
                </div>
                <div class="text-center" style="width:100%;height:60px;">     
                <!-- CRM角色 -->
                <div class="form-group col-md-12" style="overflow-x:auto;height:250px;">
                      <!-- 引入zTree -->		
                      <ul id="tree" class="ztree" ></ul>  
                </div>

                </div>
                 <div class="modal-footer" style="text-align:center;border-top:none;">
                     <button type="button" class="btn btn-outline btn-primary" onclick="cancel();">取消</button>
                     <button type="button" class="btn btn-primary k_verify" data-dismiss="modal" onclick="confirmChoseDepartment()">确定</button>
                 </div>
             </div>
        </div>
    </div> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="<%=path%>/hplus/js/plugins/iCheck/icheck.min.js"></script>
    <script type="text/javascript" src="<%=path%>/hplus/js/plugins/dataTables/jquery.dataTables.min.js"></script>
    <script src="<%=path%>/hplus/js/plugins/sweetalert/sweetalert2.min.js"></script>
    <script type="text/javascript" src="<%=path%>/js/marketing/dialog.js"></script>
	<script type="text/javascript" src="<%=path%>/js/marketing/public.js"></script>
    <script type="text/javascript" src="<%=path%>/js/marketing/validation.js"></script>
	<script type="text/javascript" src="<%=path%>/js/marketing/lengthlimit.js"></script>
	<script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
	<script type="text/javascript" src="<%=path%>/hplus/js/plugins/datapicker/bootstrap-datepicker.js"/>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<script type="text/javascript" src="<%=path%>/js/dateUtils.js"></script>
	<script src="<%=path%>/hplus/js/plugins/zTree/jquery.ztree.all-3.5.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/artDialog/7.0.0/dialog-plus.js"></script>
    <script>
	    var path = "<%=path%>";
	    var myDataTable;
	    var materialName="";
	    var currentYear=0;
	    var currentMonth=0;
	    var day=0;
	    var selectYear=0;
	    var selectMonth=0;
	   	$.fn.dataTable.ext.errMode = 'none';
	   	
	   	var startTime = "";
	   	var endTime = "";
	   	var departmentIds = "";
	   	var nickName = "";
	   	var staffPhone = "";
        $(function(){
        	init();
        	initZtree();
        });
        
        function init(){
        	/* var myDate = new Date();
	    	//获取当前年
	    	 currentYear=myDate.getFullYear();
	    	//获取当前月
	    	 currentMonth=myDate.getMonth()+1;
	    	//获取当前日
	    	 day=myDate.getDate(); 
	    	if(day<10){
	    		day="0"+day;
	    	}
	        	
	    	for(i=2017;i<currentYear+1;i++){
	    		$('#selectYear').prepend('<option value="'+i+'">'+i+'年</option>');
	    	}
	    	for(i=1;i<currentMonth+1;i++){
	    		$('#selectMonth').append('<option value="'+i+'">'+i+'月</option>');
	    	}
	    	$('#selectYear').val(currentYear);
	    	$('#selectMonth').val(currentMonth);
	    	startTime = currentYear+"-"+polishingMonth(currentMonth)+"-01";
	    	endTime = currentYear+"-"+polishingMonth(currentMonth)+"-"+day;
	    	$('#selectDate').html(startTime + " 到  " +endTime);
	    	selectYear=currentYear;
	    	selectMonth=currentMonth; */
        	initDate();
        	myDataTable = dataTable();
        }
        /* 初始化控件时间 */
	    function initDate(){
	    	var myDate = new Date();
	    	//获取当前年
	    	var year=myDate.getFullYear();
	    	//获取当前月
	    	var month=myDate.getMonth();
	    	var lastMoth=myDate.getMonth()+1;
	    	//获取当前日
	    	var day=myDate.getDate(); 
	    	if(day<10)
	        	day="0"+day;
	    	if(month<10)
	    		month="0"+month;
	    	$("#start_time").val(year+"-"+month+"-"+day);
	        $('#start_time').datepicker({  
	            todayBtn : "linked",  
	            autoclose : true,  
	            todayHighlight : true, 
	            forceParse : true,
	            endDate : new Date()  
	        }).on('changeDate',function(e){  
	        });
	        if(lastMoth>12){
	        	year=year+1;
	        	lastMoth=lastMoth-12;
	        }
	        if(lastMoth<10)
	        	lastMoth="0"+lastMoth;
			$("#end_time").val(year+"-"+lastMoth+"-"+day);
			$('#end_time').datepicker({
				todayBtn : "linked",
				autoclose : true,
				todayHighlight : true,
				forceParse : true,
				endDate : new Date()
        	}).on('changeDate',function(e){
	        });
	    }
        
        function func_dataTableReload(){
        	myDataTable.ajax.reload(function(){
        		$(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green"});
        		$('input').iCheck('uncheck');
        	});
        }
        
        var staffInfoMap=new Map();
        var lineNum = 0;
        function dataTable(){
        	staff_info={};
        	return $('#mydataTable').DataTable({
        		processing: true,
        		ordering: false,
        		searching: false,
        		info: true,
        		autoWidth: true,
        		lengthChange: false,
        		"order": [[ 2, "desc" ]],
        	    language: {
        	    	emptyTable: '暂无数据',
        	    	info: '从第 _START_ 到第 _END_ 条数据；总共有 _TOTAL_ 条记录',
        			infoEmpty: '没有数据',
        			lengthMenu: '每页显示 _MENU_ 条记录',
        			loadingRecords: '正在加载数据....',
        			processing: '正在处理数据....',
        			zeroRecords: '没有找到匹配的记录',
        			paginate: {
        				first: '首页',
        				previous: '前页',
        				next: '后页',
        				last: '尾页'
        			}
        	    },
        	    order: [[1,'desc']],
        		pageLength: 20,
        	    pagingType: 'full_numbers',
        	    columnDefs: [{
        			render: function(data, type, full) {
        				var oTable = $('#mydataTable').dataTable();
        				var tableSetings=oTable.fnSettings();  
        				var paging_length=tableSetings._iDisplayLength;//当前每页显示多少  
        				var page_start=tableSetings._iDisplayStart;//当前页开始  
        				var page=(page_start / paging_length);
        				lineNum++;
        				return (page*20+lineNum);
                    },
        			targets: 0
        		},{
        			render: function(data, type, full) {
        				return " "+formatDateTimeYMDHMS(data);
                    },
        			targets: 5
        		},{
        			render: function(data, type, full) {
        				return " "+full.departmentName;
                    },
        			targets: 1
        		},{
        			render: function(data, type, full) {
        				return " "+full.nickName;
                    },
        			targets: 2
        		},{
        			render: function(data, type, full) {
        				staffInfoMap.set(full.id,full);
        				return '<a class="staffInfoHint"  style="padding-top:6px;padding-bottom:6px;z-index:999;color:#676a6c;">' + full.staffInfo.phone + '</a>';
                    },
        			targets: 3
        		},{
        			render: function(data, type, full) {
        				var score = data+"";
        				if(isHaveStr(score,"-")){
        					return score;
        				}else{
        					return "+"+score;
        				}
                    },
        			targets: 6
        		}],
        	    columns: func_columns(), 
        	    serverSide: true,
        	    ajax: {
        	    	contentType: 'application/json;charset=utf-8',
        	    	type: 'POST',
        	    	url: func_AjaxUrl(),
        	    	data: function(d){
        	    		d.startTime = $('#start_time').val() + " 00:00:00";
        	    		d.endTime = $('#end_time').val() + " 23:59:59";
        	    		d.departmentIds = departmentIds;
        	    		d.nickName = nickName;
        	    		d.staffPhone = staffPhone;
        				return JSON.stringify(d);
        			}
        		} , 
        	    "initComplete": function(settings, json) {
        	    	$(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green",});
        	    }
        	}).on( 'draw', function (json) {
        		$(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green",});
        		staffInfoMap.forEach(function (element, index, array) {
        			var html="<p>姓名："+element.nickName+"</p ><p>手机："+element.staffInfo.phone+"</p ><p>所属部门："+element.departmentName+"</p >";
    				$("#td-span-"+element.id).popover({
    	                html: true, // 为true的话，data-content里就能放html代码了		
    	                content:html,
    	                trigger:'hover',
    	                placement:'top',		
    	                placement: "right",
    	                delay: {hide: 100}
    	        	}).on('shown.bs.popover', function (event) {
    	                var that = this;
    	                $(this).parent().find('div.popover').on('mouseenter', function () {
    	                    $(that).attr('in', true);
    	                }).on('mouseleave', function () {
    	                    $(that).removeAttr('in');
    	                    $(that).popover('hide');
    	                });
    	            }).on('hide.bs.popover', function (event) {
    	                if ($(this).attr('in')) {
    	                    event.preventDefault();
    	                }
    	            });
        		});
        	}).on( 'page.dt', function () {
        		    lineNum = 0;
        	});
        	
        }
        function func_AjaxUrl(){
        	return path+"/staffScoreDetail/ajaxStaffScoreDetailList";
        }
        /**
         *	设置列名，对应后台
         */
        function func_columns(){
        	var jsonArr = [
        		{"data":"id"},
        		{"data":"departmentName"},
        		{"data":"nickName"},
        		{"data":"nickName"},
        		{"data":"description"},
        		{"data":"createTime"},
        		{"data":"score"},
        	];
        	return jsonArr;
        }
        
        /* 搜索 */
        function search(){
        	nickName = $('#nickName').val();
        	staffPhone = $("#staffPhone").val();
        	console.log("staffPhone--------->"+staffPhone);
        	if(StringEmpty(staffPhone) && !validatemobile(staffPhone)){
        		errorDialog("输入的手机号码有误，请重新输入");
        	}
        	func_dataTableReload();
        }
        /* 导出 */
        function exportCsvData(){
        	var paramObj=new Object();
	      	paramObj.startTime = $('#start_time').val() + " 00:00:00";
	      	paramObj.endTime = $('#end_time').val() + " 23:59:59";
	      	var paramJson=JSON.stringify(paramObj);
			window.location.href=path+"/staffScoreDetail/exportCsvData?paramJson="+encodeURI(paramJson);
        }
        
    </script>
    <!-- 时间下拉选择切换 -->
    <script type="text/javascript">
	    function yearChange(){
	    	selectYear = $("#selectYear  option:selected").val();
	    	var monthHtml="";
	    	var dateHtml="";
	    	if(selectYear != currentYear){
	    		for(i=1;i<13;i++){
		    		$('#selectMonth').append('<option value="'+i+'">'+i+'月</option>');
		    		monthHtml += '<option value="'+i+'">'+i+'月</option>';
		    	}
	    		startTime = selectYear+"-"+polishingMonth(currentMonth)+"-01";
	    		endTime = selectYear+"-"+polishingMonth(currentMonth)+"-"+getLastDay(selectYear,currentMonth);
	    		dateHtml=startTime + " 到  "+endTime;
	    	}else{
	    		for(i=1;i<currentMonth+1;i++){
	    			monthHtml += '<option value="'+i+'">'+i+'月</option>';
		    	}
	    		startTime = selectYear+"-"+polishingMonth(currentMonth)+"-01";
	    		endTime = selectYear+"-"+polishingMonth(currentMonth)+"-"+day;
	    		dateHtml=startTime + " 到  " +endTime;
	    	}
	    	$('#selectMonth').html(monthHtml);
	    	$('#selectDate').html(dateHtml);
	    	$('#selectMonth').val(currentMonth);
	    }
	    
	    function monthChange(){
	    	selectMonth = $("#selectMonth  option:selected").val();
	    	var monthHtml="";
	    	var dateHtml="";
	    	if(selectMonth != currentMonth){
	    		startTime = selectYear+"-"+polishingMonth(selectMonth)+"-01";
	    		endTime = selectYear+"-"+polishingMonth(selectMonth)+"-"+getLastDay(selectYear,selectMonth);
	    		dateHtml=startTime + " 到  "+endTime;
	    	
	    	}else{
	    		startTime = selectYear+"-"+polishingMonth(selectMonth)+"-01";
	    		endTime = selectYear+"-"+polishingMonth(selectMonth)+"-"+day;
	    		dateHtml= startTime+ " 到  "+endTime;
	    	}
	    	$('#selectDate').html(dateHtml);
	    }
	    
	    /* 获取一个月的最后一天 */
	    function getLastDay(year,month){
	    	//判断是否为大月
	    	var isBigMonth = month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12;
	    	if(month == 2){
	    		if(isLeapYear(year)){
	    			return 28;
	    		}else{
	    			return 29;
	    		}
	    	}else if(isBigMonth){
	    		return 31;
	    	}else{
	    		return 30;
	    	}
	    }
	    /* 判断是否为闰年 */
	    function isLeapYear(year){
	    	if(year%4 == 0 && year%100 !=0 || year%400==0){
	            return true;
	        }else{
	            return false;
	        }
	    }
	    /*  */
	    function polishingMonth(month){
	    	if(month<10){
	    		month="0"+month;
	    	}
	    	return month;
	    }
	    
	    
    </script>
    
    <script type="text/javascript">
  //初始化部门基础树
	function initZtree(){
    	//保存所有的部门节点数据
    	var zNodes =[];
		//发送ajax请求，从DB中查询该企业下，包含层级关系的全部部门
      	var url="<%=path%>/department/ajaxSelectAllDepartment";
    	$.post(url, {
		}, function(data) {
			var realData = data.data;
			if (data.status == 200) {
				for(var i=0;i<realData.length;i++){
					var treeData = null;
					//机构团队用不同的图标
					if(realData[i].companyType == 1){
					   treeData = {id:realData[i].id,companyType:realData[i].companyType,leaderName:realData[i].leaderName,pId:realData[i].parentDeptId, name:realData[i].name,title:realData[i].title,open:true,icon:"${pageContext.request.contextPath}/images/system/mechanismIcon.png"};
					}else{
					   treeData = {id:realData[i].id,companyType:realData[i].companyType,leaderName:realData[i].leaderName,pId:realData[i].parentDeptId, name:realData[i].name,title:realData[i].title,open:true,icon:"${pageContext.request.contextPath}/images/system/teamIcon.png"};
					}
					zNodes.push(treeData);
				}
				zTree(zNodes);
			}else{		
        		errorDialog(data.message);
        	}
		}); 
	}
	
	
	
       /*
       chkboxType: { “Y”: “ps”, “N”: “ps” } 
	   Y 属性定义 checkbox 被勾选后的情况； 
	   N 属性定义 checkbox 取消勾选后的情况； 
	   “p” 表示操作会影响父级节点； 
	   “s” 表示操作会影响子级节点。 
	   */
       //控件初始化部门基础树
       function zTree(treeData){
           var zTree;
           //用于保存用户选中的节点
           var curNode;
           //树属性的定义  
           var setting = {  
               check: { 
            	   enable: true,				
            	   chkStyle: "checkbox",   //勾选框类型(checkbox 或 radio）
            	   chkboxType: { "Y": "", "N": "" }   //勾选 checkbox 对于父子节点的关联关系
               },	
               //页面上的显示效果  
               view: {
                   showLine: false,					
                   selectedMulti: false
               }, 
               data: {
                   simpleData: {
                       enable:true,
                       idKey: "id",
                       pIdKey: "pId",
                       rootPId: ""
                   },  
	               key: {  
	                   title: "title"  
	               } 
               },
               callback: {
                   beforeClick: getCurrentNode,
                   onClick : zTreeOnClick
               }
           };
           
           function getCurrentNode(treeId, treeNode) {
               curNode = treeNode;    
           }
           
           //点击左侧的菜单树，动态展示右侧
           function zTreeOnClick(){	
        	  // alert(curNode.id);
        	  //$("#belognDepartmentId").val(curNode.id);
           	}

           //初始化树
           var t = $("#tree");
           t = $.fn.zTree.init(t, setting, treeData);
       }
	   
    
       //设置某节点的选中状态
       function setTreeNoteSelect(treeName,id){
        	//根据id获取树的某个节点：
        	var zTree = $.fn.zTree.getZTreeObj(treeName);
        	var node = zTree.getNodeByParam("id",id);
        	//设置node节点选中状态：
        	zTree.selectNode(node);
       }
       
       //用户选中了所在部门的取消
       function cancel(){
        	var baseTreeSelect = getQueryString("baseTreeSelect");
			//设置树的选中状态
			setTreeNoteSelect("tree",baseTreeSelect);
			$("#modalDepartment").modal("hide");
       }
       
   	   /* 选择部门确定 */
       function confirmChoseDepartment(){
    	 //用户选择的模块权限
    	   	var treeObj = $.fn.zTree.getZTreeObj("tree");
    	       nodes=treeObj.getCheckedNodes(true);
    	   	//拿到一组负责部门权限
    	   	var fzdepartment = "";
    	       for(var i=0;i<nodes.length;i++){  
    	       	if(i == 0){
    	       		fzdepartment += nodes[i].id; //获取选中节点的值  
    	       	}else{
    	       		fzdepartment += "," + nodes[i].id; //获取选中节点的值  
    	       	}
    	    } 
    	    departmentIds=fzdepartment;
       }
    </script>
    
    
</body>
</html>
